import { commonParse } from './parseElement'
import { taskListenerOpt } from './options'
export default {
  props: {
    formSize: {
      type: String,
      default: 'mini'
    },
    element: {
      type: Object,
      required: true
    },
    bpmnModeler: {
      type: Object,
      required: true
    },
    formProperty: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeNames: ['1'],
      loading: false,
      formData: {}
    }
  },
  created() {
    this.formData = commonParse(this.element)
  },
  watch: {
    'formData.id': function(val) {
      if (val) {
        this.updateProperties({ id: val })
      }
    },
    'formData.name': function(val) {
      if (val) {
        this.updateProperties({ name: val })
      }
    },
    'formData.documentation': function(val) {
      if (!val) {
        this.updateProperties({ documentation: [] })
        return
      }
      const documentationElement = this.bpmnModeler.get('moddle').create('bpmn:Documentation', { text: val })
      this.updateProperties({ documentation: [documentationElement] })
    }
  },
  mounted() {
    this.formData.executionListener = this.getListenerValue('flowable:ExecutionListener')
  },
  methods: {
    // 绑定监听事件
    getListenerValue(type) {
      return this.element.businessObject.extensionElements ? this.element.businessObject.extensionElements.values
        .filter(item => item.$type === type).map(item => {
          let type
          if ('class' in item) type = 'class'
          if ('expression' in item) type = 'expression'
          return { event: item.event, type: type, value: item.class }
        }) : []
    },
    updateProperties(properties) {
      const modeling = this.bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, properties)
    },
    updateExtensionElements(el, values) {
      let extensionElements = this.element.businessObject.get('extensionElements')
      if (!extensionElements) {
        extensionElements = this.bpmnModeler.get('moddle').create('bpmn:ExtensionElements')
      }
      extensionElements.values = extensionElements.values ? extensionElements.values
        .filter(item => item.$type !== el) : []
      values.forEach(item => {
        extensionElements.values.push(this.bpmnModeler.get('moddle').create(el, item))
      })
      this.updateProperties({ extensionElements: extensionElements })
    },
    getData() {
      return this.formData
    },
    /** 执行监听器 开启 **/
    getType(row) {
      let o
      taskListenerOpt.typeOpt.forEach(item => {
        if (item.value === row.type) {
          o = item.label
        }
      })
      return o
    },
    /**
     * 保存监听器
     * @param newVal 修改后的值
     * @param oldVal 修改前的值
     * @param name 表格绑定数组名称
     * @param el 流程节点名称
     * @param dialogName dialog名称
     */
    saveListener(newVal, oldVal, name, el, dialogName) {
      if (oldVal && Object.keys(oldVal).length > 0) {
        this.arrRemove(this.formData[name], oldVal)
      }
      const v = Object.assign({}, newVal) // 必须复制一份新，否则会双向绑定
      // if (!this.formData[name]) {
      //   this.formData[name] = []
      // }
      this.formData[name].push(v)
      this.updateTaskListenerElements(this.formData[name], el)
      this.$refs[dialogName].hiddenDialog()
    },
    btnAddListener(dialogName) {
      this.$refs[dialogName].showDialog()
    },
    btnEditListener(dialogName, row) {
      this.$refs[dialogName].showDialog(row)
    },
    btnDeleteListener(index, name, el) {
      this.formData[name].splice(index, 1)
      this.updateTaskListenerElements(this.formData[name], el)
    },
    arrRemove(arr, delValue) {
      for (let i = 0; i < arr.length; i++) {
        if (JSON.stringify(arr[i]) === JSON.stringify(delValue)) {
          arr.splice(i, 1)
        }
      }
    },
    /** 执行监听器 结束 **/
    updateTaskListenerElements(list, el) {
      // 清除旧值
      let extensionElements = this.element.businessObject.get('extensionElements')
      if (!extensionElements) {
        extensionElements = this.bpmnModeler.get('moddle').create('bpmn:ExtensionElements')
      }
      extensionElements.values = extensionElements.values ? extensionElements.values
        .filter(item => item.$type !== el) : []

      list.forEach(item => {
        const tl = this.bpmnModeler.get('moddle').create(el)
        tl[item.type] = item.value
        tl['event'] = item.event
        extensionElements.get('values').push(tl)
      })
      this.updateProperties({ extensionElements: extensionElements })
    }
  }
}
